<template>
	<!--v-if="detail.length>0"-->
	<view v-if="goodsList.length >0">
		<view class="title-box x-bc" style="margin-top: 24rpx;margin-bottom: 20rpx;" @tap="jump('/pages/featurePipe/featurePipe')">
			<!-- <view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/GoodsList/index',query:{id,title} })"> -->
			<!-- ?id=211&title=宠物专区 -->
			<text class="title">特色馆</text>
			<!-- {{detail. cateName}}  {{goodsList. cateName}}-->
			<view class="group-people x-f">
				<text class="tip">查看更多</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>

		<view class="group-goods pa20 mx20 mb10" style="margin-top: -24rpx;">
			<view class="goods-box swiper-box x-f" v-for="(goods, index) in goodsList" :key="index">
				<!-- <swiper class="carousel" circular @change="swiperChange" :autoplay="false" duration="2000">
					<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
						<view class="goods-list-box x-f" style="background: #fff;"> -->
				<!--  @tap="$yrouter.push({ path: '/pages/activity/SeckillDetails/index',query:{id:mgoods.id,time:seckItem.stop,status:seckItem.status,timeStr:seckItem.time} })"> -->
				<block style="background: #fff;">
					<view class="min-goods min-gai" @tap="$yrouter.push({ path: '/pages/shop/GoodsLists/index', query: { id: goods.id,title:goods.cateName} })" style="background: #fff;">
						<view class="tese">
							<view class="tese-q">{{goods.cateName}}</view>
							<view class="tese-w">查看</view>
						</view>
						<view class="img-box" style="background: #fff;">
							<view class="tese-e" v-for="mgoods in goods.cateProductList.slice(0,2)" :key="mgoods.id" ><image class="img" :src="mgoods.image" mode="widthFix"></image></view>
						</view>
					</view>
					<!-- <sh-activity-good :detail="mgoods" class="goods-item"></sh-activity-good> -->
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import shActivityGood from '@/components/sh-activity-good.vue';
import { getFeaturePipeList } from '@/api/activity';

export default {
	name: 'SeckillProduct',
	components: {
		shActivityGood
	},
	data() {
		return {
			goodsList: [],
			swiperCurrent: 0
		};
	},
	props: {
		detail: Array,
		seckItem: null
	},
	computed: {},
	created() {
		this.gettesefun();
	},
	watch: {
		detail(next) {
			// this.goodsList = this.sortData(next);
		}
	},
	methods: {
		gettesefun() {
			getFeaturePipeList().then(res => {
				if (res.status == 200) {
					this.goodsList = res.data;
				}
			});
		},
		// swiperChange(e) {
		// 	this.swiperCurrent = e.detail.current;
		// },
		// 数据分层
		// sortData(oArr, length) {
		// 	let arr = [];
		// 	let minArr = [];
		// 	oArr.forEach(c => {
		// 		if (minArr.length === length) {
		// 			minArr = [];
		// 		}
		// 		if (minArr.length === 0) {
		// 			arr.push(minArr);
		// 		}
		// 		minArr.push(c);
		// 	});

		// 	return arr;
		// },
		jump(path, query) {
			this.$yrouter.push({
				path,
				query
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.group-goods {
	position: relative;
	z-index: 9;
	display: flex;
	padding: 0;
}

.swiper-box,
.carousel {
	width: 95%;
	height: 282upx;
	position: relative;
	border-radius: 15rpx;

	.carousel-item {
		width: 100%;
		height: 100%;
		// padding: 0 28upx;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		// border-radius: 10upx;
		background: #ccc;
	}
}

.swiper-dots {
	display: flex;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0rpx;
	z-index: 66;

	.dot {
		width: 5px;
		height: 5px;
		background: #eee;
		border-radius: 100%;
		margin-right: 10rpx;
	}

	.dot-active {
		width: 5px;
		height: 5px;
		background: #a8700d;
		border-radius: 100%;
		margin-right: 10rpx;
	}
}

.min-goods {
	background: #ffffff;
}
// 今日必拼+限时抢购
.title-box {
	width: 92%;
	margin: auto;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	.tip {
		font-size: 22rpx;
		padding-left: 30rpx;
		color: #666;
	}
}
.group-goods {
	border-radius: 20rpx;
	overflow: hidden;

	.title-box {
		padding-bottom: 20rpx;
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.group-people {
			.time-box {
				font-size: 26rpx;
				color: #edbf62;

				.count-text-box {
					width: 30rpx;
					height: 34rpx;
					background: #edbf62;
					text-align: center;
					line-height: 34rpx;
					font-size: 24rpx;
					border-radius: 6rpx;
					color: rgba(#fff, 0.9);
					margin: 0 8rpx;
				}
			}

			.head-box {
				.head-img {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: #ccc;
				}
			}

			.tip {
				font-size: 28rpx;
				padding-left: 30rpx;
				color: #666;
			}

			.cuIcon-right {
				font-size: 30rpx;
				line-height: 28rpx;
				color: #666;
			}
		}
	}

	.goods-box {
		.goods-item {
			margin-right: 22rpx;
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
}
.min-goods {
	width: 343rpx;
	height: 302rpx;
	margin-top: 24rpx;
	border-radius: 15rpx;
	.tese {
		display: flex;
		justify-content: space-between;
		.tese-q {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			margin-left: 16rpx;
			margin-top: 21rpx;
			font-weight: 600;
		}
		.tese-w {
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
			margin-right: 16rpx;
			margin-top: 21rpx;
		}
	}
	.img-box {
		width: 100%;

		display: flex;
		justify-content: space-between;

		height: auto;
		.tese-e {
			width: 148rpx;
			height: 187rpx;
			margin-left: 16rpx;
			margin-right: 16rpx;
			margin-top: 23rpx;
			.img {
				width: 100%;
				height: 157rpx !important;
			}
		}
	}
}
</style>
